/**
 * 管理后台JavaScript功能
 */

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 检查用户权限
    checkAdminPermission();
    
    // 初始化侧边栏
    initSidebar();
    
    // 初始化图表数据
    initCharts();
    
    // 初始化表格交互
    initTableActions();
});

/**
 * 检查用户是否有管理员权限
 */
function checkAdminPermission() {
    // 获取用户信息
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || 'null');
    
    // 如果用户未登录或不是管理员，重定向到登录页
    if (!userInfo || !userInfo.isAdmin) {
        window.utils.showNotification('您没有管理员权限，请使用管理员账号登录', 'error');
        setTimeout(() => {
            window.location.href = '../login.html';
        }, 2000);
    }
}

/**
 * 初始化侧边栏
 */
function initSidebar() {
    // 获取当前页面路径
    const currentPath = window.location.pathname.split('/').pop() || 'dashboard.html';
    
    // 设置当前页面的侧边栏项为激活状态
    const sidebarItems = document.querySelectorAll('.admin-sidebar-item');
    sidebarItems.forEach(item => {
        const link = item.querySelector('a');
        const linkPath = link.getAttribute('href');
        if (linkPath === currentPath) {
            item.classList.add('active');
        } else {
            item.classList.remove('active');
        }
    });
    
    // 获取用户信息并更新侧边栏用户信息
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || 'null');
    if (userInfo) {
        const usernameElement = document.querySelector('.admin-username');
        if (usernameElement) {
            usernameElement.textContent = userInfo.username || '管理员';
        }
        
        const avatarElement = document.querySelector('.admin-avatar');
        if (avatarElement && userInfo.avatar) {
            avatarElement.src = userInfo.avatar;
        }
    }
}

/**
 * 初始化图表数据
 */
function initCharts() {
    // 这里应该使用图表库如Chart.js来绘制图表
    // 由于是静态演示，这里只是模拟图表加载
    console.log('图表初始化');
    
    // 模拟图表加载延迟
    const chartPlaceholders = document.querySelectorAll('.chart-placeholder');
    chartPlaceholders.forEach(placeholder => {
        // 添加加载动画
        placeholder.innerHTML = '<div class="spinner"></div>';
        
        // 模拟加载完成后显示图表图片
        setTimeout(() => {
            if (placeholder.dataset.chart === 'users') {
                placeholder.innerHTML = '<img src="../img/chart-users.png" alt="用户增长趋势图表">';
            } else if (placeholder.dataset.chart === 'demands') {
                placeholder.innerHTML = '<img src="../img/chart-demands.png" alt="支教需求分布图表">';
            }
        }, 1000);
    });
}

/**
 * 初始化表格交互
 */
function initTableActions() {
    // 表格操作按钮事件
    const actionButtons = document.querySelectorAll('.btn-icon');
    actionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const action = this.getAttribute('title');
            const row = this.closest('tr');
            const userName = row.querySelector('.user-info span').textContent;
            const demandTitle = row.cells[1].textContent;
            
            switch (action) {
                case '查看详情':
                    showApplicationDetails(userName, demandTitle);
                    break;
                case '通过':
                    approveApplication(userName, demandTitle, row);
                    break;
                case '拒绝':
                    rejectApplication(userName, demandTitle, row);
                    break;
            }
        });
    });
}

/**
 * 显示申请详情
 * @param {string} userName - 用户名
 * @param {string} demandTitle - 需求标题
 */
function showApplicationDetails(userName, demandTitle) {
    // 创建模态框显示详情
    window.utils.createModal({
        title: '申请详情',
        content: `
            <div class="application-details">
                <div class="detail-item">
                    <div class="detail-label">申请人：</div>
                    <div class="detail-value">${userName}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">支教需求：</div>
                    <div class="detail-value">${demandTitle}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">申请时间：</div>
                    <div class="detail-value">2023-09-15</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">联系方式：</div>
                    <div class="detail-value">13800138000</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">申请说明：</div>
                    <div class="detail-value">我是一名大学生，有丰富的支教经验，希望能够参与这个项目，为山区孩子带去知识和希望。</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">教学经验：</div>
                    <div class="detail-value">曾参与过两次支教活动，擅长语文和数学教学。</div>
                </div>
            </div>
        `
    });
}

/**
 * 通过申请
 * @param {string} userName - 用户名
 * @param {string} demandTitle - 需求标题
 * @param {HTMLElement} row - 表格行元素
 */
function approveApplication(userName, demandTitle, row) {
    window.utils.showConfirm(
        `确定通过 ${userName} 对 ${demandTitle} 的申请吗？`,
        function() {
            // 更新状态标识
            const statusBadge = row.querySelector('.status-badge');
            statusBadge.className = 'status-badge status-approved';
            statusBadge.textContent = '已通过';
            
            // 移除操作按钮，只保留查看详情
            const tableActions = row.querySelector('.table-actions');
            tableActions.innerHTML = `
                <button class="btn-icon" title="查看详情">
                    <i class="bi bi-eye"></i>
                </button>
            `;
            
            // 重新绑定事件
            const viewButton = tableActions.querySelector('.btn-icon');
            viewButton.addEventListener('click', function() {
                showApplicationDetails(userName, demandTitle);
            });
            
            // 显示成功通知
            window.utils.showNotification(`已通过 ${userName} 的申请`, 'success');
        }
    );
}

/**
 * 拒绝申请
 * @param {string} userName - 用户名
 * @param {string} demandTitle - 需求标题
 * @param {HTMLElement} row - 表格行元素
 */
function rejectApplication(userName, demandTitle, row) {
    window.utils.showConfirm(
        `确定拒绝 ${userName} 对 ${demandTitle} 的申请吗？`,
        function() {
            // 更新状态标识
            const statusBadge = row.querySelector('.status-badge');
            statusBadge.className = 'status-badge status-rejected';
            statusBadge.textContent = '已拒绝';
            
            // 移除操作按钮，只保留查看详情
            const tableActions = row.querySelector('.table-actions');
            tableActions.innerHTML = `
                <button class="btn-icon" title="查看详情">
                    <i class="bi bi-eye"></i>
                </button>
            `;
            
            // 重新绑定事件
            const viewButton = tableActions.querySelector('.btn-icon');
            viewButton.addEventListener('click', function() {
                showApplicationDetails(userName, demandTitle);
            });
            
            // 显示成功通知
            window.utils.showNotification(`已拒绝 ${userName} 的申请`, 'success');
        }
    );
}